<template>
	<div class="login-form">
		<h3 style="text-align: center;" class="login_title">欢迎麒盛科技数据中心</h3>
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="用户名" prop="username">
				<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'login-form',
		data: function() {
			return {

				ruleForm: {
					username: '',
					password: ''

				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						}

					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}]

				}
			}
		},

		methods: {
			handle: function() {
				let url = 'https://www.easy-mock.com/mock/5fa88fd346fe9a0d32af2788/'
				let data = {
					username: this.username,
					password: this.password
				}
				this.axios.post(
					url,
					data

				).then(function(response) {
					console.log(response.data)
				})
			},
			submitForm(formName) {
				
				var vm = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$notify({
							title: '登录成功',
							message: '欢迎使用本系统',
							type: 'success'
							});
							
						setTimeout(function(){
							vm.$router.push('/mainPage')
						},1000)
							
						
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}

	}
</script>


<style scoped="scoped">
	.login-form{
		width: 500px;
		height: 600px;
		border: 1px solid #9e9e9e;
		margin: 80px 10px 100px 900px;
		padding: 20px 40px 20px 20px;
		box-shadow: 2px 2px 10px #9e9e9e;
		
	}
	.login_title{
		margin-top: 150px;
		margin-bottom: 20px;
	}
</style>